<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>菜单管理</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <script src="/statics/js/custom/lib.js?_V=1"></script>
    <link href="/statics/plugins/fontIconPicker/css/jquery.fonticonpicker.min.css" rel="stylesheet">
    <link href="/statics/plugins/fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css"
          rel="stylesheet"/>
    <link href="/statics/plugins/jstree/style.min.css" rel="stylesheet">

</head>

<body ng-app="">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <ng-include src="'/admin/common/sidebar.html'"></ng-include>
        <!--End 左侧导航-->
        <!--头部信息-->
        <ng-include src="'/admin/common/header.html'"></ng-include>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid p-t-15">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">菜单管理</div>
                            </div>
                            <div class="card-body">
                                <div id="menuTree"></div>
                            </div>
                        </div>
                    </div>
                    <!--添加修改弹窗-->
                    <div class="col-lg-8 rightDiv" id="createOrUpdate" style="display: none;">
                        <div class="card">
                            <div class="card-header" style="width: 100% !important;"><span style="font-size: 16px;"
                                                                                           id="menuName">编辑</span>
                            </div>
                            <div class="card-body">
                                <form action="" id="createOrUpdateForm" class="row">
                                    <input type="hidden" name="id" value="">
                                    <input type="hidden" name="parentId" value="">
                                    <div class="form-group col-md-12" id="parentNameDiv">
                                        <label for="parentName">父级菜单</label>
                                        <input type="text" class="form-control"
                                               id="parentName" name="parentName" readonly value=""/>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="name">菜单名称</label><span class="required">* </span>
                                        <input type="text" class="form-control mx_required"
                                               mx_required_msg="菜单名称不能为空"
                                               id="name" name="name" value=""
                                               placeholder="请输入菜单名称"/>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="type">选择菜单类型</label><span class="required">* </span>
                                        <select class="form-control mx_required"  mx_required_type="select"  mx_required_msg="请选择菜单类型" id="type" name="type">
                                            <option value="">菜单类型</option>
                                            <option value="0">默认</option>
                                            <option value="1">公开</option>
                                            <option value="2">拥有者</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="type">是否隐藏</label><span class="required">* </span>
                                        <select class="form-control mx_required" mx_required_type="select"  mx_required_msg="请选择菜单状态" id="hideStatus" name="hideStatus">
                                            <option value="">是否隐藏</option>
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label class="col-md-12" for="icon" style="padding: 0;">选择icon</label>
                                        <input type="text" class="form-control"
                                               id="icon" name="icon" value=""
                                               placeholder="请选择icon" readonly/>
                                        <span id="show-mdi"></span>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="path">path(<span style="color: red;font-size: 10px;">用于子页面定位左侧导航栏，默认根据url定位</span>)</label><br>
                                        <span style="color: red;font-size: 10px;">例如 订单列表/admin/order/list.html 订单详情 /admin/order/detail.html path输入/admin/order  订单详情页面左侧导航栏就能定位到订单列表</span>
                                        <input type="text" class="form-control"
                                               id="path" name="path" value=""
                                               placeholder="请输入path"/>
                                    </div>
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="sort">排序</label><span class="required">* </span></br>
                                        <span style="color: red;font-size: 10px;">决定左侧导航栏顺序，不会验证是否重复</span>
                                        <input type="number" class="form-control mx_required" mx_required_msg="排序不能为空"
                                               id="sort" name="sort" value=""
                                               placeholder="请输入排序"/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="url">url</label><br>
                                        <span style="color: red;font-size: 10px;">页面跳转的url路径</span>
                                        <input type="text" class="form-control"
                                               id="url" name="url" value=""
                                               placeholder="请输入url"/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="permission">权限码</label><br>
                                        <span style="color: red;font-size: 10px;">如果不填，则默认不需要权限控制.</span>
                                        <input type="text" class="form-control"
                                               id="permission" name="permission" value=""
                                               placeholder="请输入权限码"/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <button type="button" id="saveMenu"
                                                class="btn btn-primary m-r-5 mx_validator_button">保 存
                                        </button>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                    <!--分类删除弹窗-->
                    <div class="modal fade bs-example-modal-lg removeMenu" tabindex="-1" role="dialog"
                         aria-labelledby="myLargeModalLabel" data-backdrop="static">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h6 class="modal-title">确认删除</h6>
                                    <div class="float-right">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="modal-body">
                                    是否确定删除数据?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="removeMenu">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script type="text/javascript" src="/statics/js/apis/menu.js"></script>
<script type="text/javascript" src="/statics/js/apis/role.js"></script>
<script type="text/javascript" src="/statics/js/custom/select.js"></script>
<script type="text/javascript" src="/statics/plugins/fontIconPicker/jquery.fonticonpicker.min.js"></script>
<script type="text/javascript" src="/statics/plugins/jstree/jstree.min.js"></script>
<script type="text/javascript">

    function customMenu(node) {
        var items = {
            "create": {
                "label": "添加下一级",
                "action": function (data) {
                    var dataId = node.a_attr.data_id;
                    Form.clearValues($("#createOrUpdateForm"))
                    $("#createOrUpdateForm").find("input[name='parentName']").val(node.text);
                    $("#createOrUpdateForm").find("input[name='parentId']").val(dataId);
                    $("#createOrUpdateForm").attr("action", MENU_CREATE)
                    $(".selected-icon").find("i").attr("class", "fip-icon-block");
                    $('#show-mdi').html("");
                    $("#parentNameDiv").show();
                    $(".rightDiv").hide();
                    $("#menuName").text("添加");
                    $("#createOrUpdate").show();
                }
            },
            "edit": {
                "label": "编辑",
                "action": function (data) {
                    var dataId = node.a_attr.data_id;
                    if (!dataId) {
                        return false;
                    }
                    Form.clearValues($("#createOrUpdateForm"))
                    $("#createOrUpdateForm").attr("action", MENU_UPDATE)
                    Request.builder()
                        .url(MENU_DETAIL)
                        .data({"id": dataId})
                        .isToken(true)
                        .callback(function (e) {
                            if (e.code === "00000") {
                                Form.setValues($("#createOrUpdateForm"), e.data);
                                var icon = "fip-icon-block";
                                if (e.data.icon) {
                                    icon = e.data.icon;
                                }
                                $(".selected-icon").find("i").attr("class", icon);
                                $('#show-mdi').html(e.data.icon);
                            }
                        }).get()
                    $("#parentNameDiv").hide();
                    $(".rightDiv").hide();
                    $("#menuName").text("编辑-" + node.text);
                    $("#createOrUpdate").show();
                }
            },
            "delete": {
                "label": "删除",
                "action": function (data) {
                    var dataId = node.a_attr.data_id;
                    $("#removeMenu").attr("dataId", dataId)
                    $(".removeMenu").modal();
                }
            }

        }
        var dataId = node.a_attr.data_id;
        if (!dataId) {
            return false;
        }
        //如果是根节点
        if (dataId === "0") {
            delete items.edit;
            delete items.delete;
        }
        return items;    //注意要有返回值
    }


    //初始化树形
    function initmenuTree() {
        Request.builder()
            .url(MENU_LIST)
            .data({"page": 1, "pageSize": -1})
            .isToken(true)
            .callback(function (e) {
                var dataArray = [];
                var data = {};
                data.children = e.data;
                data.icon = "mdi mdi-file-outline"
                data.sort = 0
                data.state = {"opened": true}
                data.a_attr = {"data_id": "0"}
                data.text = "菜单管理"
                dataArray.push(data);
                $('#menuTree').jstree({
                    'core': {
                        'themes': {
                            'responsive': false
                        },
                        'data': dataArray,

                    }, "contextmenu": {
                        "items": customMenu
                    },
                    plugins: ["contextmenu"]
                });
            }).get()
    }

    $(function () {
        var font_element = $('#icon').fontIconPicker({
            theme: 'fip-bootstrap'
        });

        $.ajax({
            url: '/statics/plugins/fontIconPicker/fontjson/materialdesignicons.json',
            type: 'GET',
            dataType: 'json'
        }).done(function (response) {
            var fontello_json_icons = [];
            $.each(response.glyphs, function (i, v) {
                fontello_json_icons.push(v.css);
            });
            font_element.setIcons(fontello_json_icons);
        }).fail(function () {
            console.error('字体图标配置加载失败');
        });

        $(document).on('change', '#icon', function () {
            $('#show-mdi').html($(this).val());
        });

        //添加修改分类按钮
        $("#saveMenu").click(function () {
            var url = $("#createOrUpdateForm").attr("action")
            Validator.builder()
                .dom($("#createOrUpdateForm"))
                .url(url)
                .submitCallback(function (e) {
                    if (e.code === "00000") {
                        LayerUtil.successMsg("操作成功~")
                        setTimeout(function () {
                            $('#menuTree').jstree(true).destroy();// 清除树节点
                            initmenuTree();
                        }, 1000)
                    } else {
                        LayerUtil.failMsg(e.msg != null ? e.msg : "操作失败")
                    }
                    $(".mx_validator_button").attr("disabled", false)
                }).do();
        });
        //删除按钮
        $("#removeMenu").click(function () {
            var id = $.trim($(this).attr("dataId"));
            if (!id) {
                return false;
            }
            Request.builder()
                .url(MENU_DELETE)
                .data({"id": id})
                .isToken(true)
                .callback(function (e) {
                    if (e.code === "00000") {
                        $("#removeMenu").attr("dataId", "");
                        LayerUtil.successMsg("删除成功~");
                        setTimeout(function () {
                            $('#menuTree').jstree(true).destroy();// 清除树节点
                            initmenuTree();
                            $(".removeMenu").find(".close").trigger("click");
                        }, 1000)
                    } else {
                        LayerUtil.failMsg(e.msg != null ? e.msg : "删除失败")
                    }
                })
                .post();
        });
        //初始化菜单
        initmenuTree();


    });

</script>
</body>
</html>
